<template>
  <div class="questions-preview">
    <el-dialog title="题目预览" :visible="isVisible" width="900px"
    @close="close" @open="getQuesDetail">
      <el-row>
        <el-col :span="6" v-if="quesPreview.questionType==1">【题型】：单选题</el-col>
        <el-col :span="6" v-else-if="quesPreview.questionType==2">【题型】：多选题</el-col>
        <el-col :span="6" v-else>【题型】：简答题</el-col>
        <el-col :span="6">【编号】：{{ quesPreview.id }}</el-col>
        <el-col :span="6" v-if="quesPreview.difficulty==1">【难度】：简单</el-col>
        <el-col :span="6" v-else-if="quesPreview.difficulty==2">【难度】：一般</el-col>
        <el-col :span="6" v-else>【难度】：困难</el-col>
        <el-col :span="6">【标签】：{{ quesPreview.tags }}</el-col>
        <el-col :span="6">【学科】：{{ quesPreview.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ quesPreview.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{ quesPreview.direction }}</el-col>
      </el-row>
      <hr>
      <div class="question">
        【题干】：<div v-html="quesPreview.question" style="color:blue"></div>
        <div class="radio" v-if="quesPreview.questionType==1">
          <div class="info">单选题 选项：（以下选中的选项为正确答案）</div>
          <div v-for="(item,index) in quesPreview.options" :key="index"
          ><el-radio v-model="radio" :label="item.code">{{item.title}}</el-radio></div>
        </div>
        <div class="checkbox" v-else-if="quesPreview.questionType==2">
          <el-checkbox-group v-model="checkList">
            <div v-for="(item,index) in quesPreview.options" :key="index"
            ><el-checkbox :label="item.code">{{item.title}}</el-checkbox></div>
          </el-checkbox-group>
        </div>
        <div class="jianda" v-else>

        </div>
      </div>
      <hr>
      <div class="answer">
        【参考答案】：
        <el-button type="danger" size="small" @click="videoFlag=false">视频答案预览</el-button>
        <div class="video" style="margin-top: 10px" :class="{videoHide: videoFlag}">
          <video :src="quesPreview.videoURL" controls style="width:400px;height:300px;"></video>
        </div>
      </div>
      <hr>
      <div style="margin: 10px 0">
        【答案解析】：<div v-html="quesPreview.answer" style="display: inline-block"></div>
      </div>
      <hr>
      <div>
        【题目备注】：{{ quesPreview.remarks }}
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button @click="close" type="primary">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 根据id获取当前题目数据
import { detail as getEditData } from '@/api/hmmm/questions.js'
export default {
  props: ['isVisible', 'previewID'],
  model: {
    prop: 'previewID',
    event: 'getPreviewID'
  },
  data () {
    return {
      quesPreview: {}, // 问题详情数据
      videoFlag: true, // 视频
      radio: '', // 单选
      checkList: []// 多选
    }
  },
  methods: {
    // 获得问题详情
    async getQuesDetail () {
      this.$emit('getPreviewID')
      const res = await getEditData({ id: this.previewID })
      // console.log(res);
      if (res.status === 200) {
        this.quesPreview = res.data
      } else {
        this.$message.error('获取当前题目数据失败')
      }
    },
    // 关闭
    close () {
      this.$emit('showOrHide')
      this.videoFlag = true
    }
  }
}
</script>

<style scoped lang='scss'>
  .questions-preview {
    .el-dialog {
      .el-row {
        .el-col {
          margin: 10px 0;
        }
      }
      .question {
        .radio {
          div {
            margin-bottom: 10px;
          }
        }
        .checkbox {
          div {
            margin-bottom: 10px;
          }
        }
      }
      .videoHide {
        display: none;
      }
    }
  }
</style>
